<template>
  <view class="page">
    <canvas ref="canvasRef" class="canvas" canvas-id="canvas-zlk"></canvas>
  </view>
</template>

<script>
import Painter from "@/utils/painter/index";
export default {
  data() {
    return {};
  },
  onLoad() {
    this.showPoster();
  },
  methods: {
    async showPoster() {
      const canvasWidth = 310;
      const canvasHeight = 550;
      const painter = new Painter("canvas-zlk", this.$refs.canvasRef, {
        width: canvasWidth,
        height: canvasHeight,
      });

      // 海报底色
      await painter.drawBlock({
        x: 0,
        y: 0,
        width: canvasWidth,
        height: canvasHeight,
        bgColor: "#abcdef",
      });

      await painter.drawMultipleLine({
        text: `daljda;dj;aljdkajd;ajdk;lajdajd;ajd;aj;dajsdja;dkja;dka;djak;ldj`,
        align: "left",
        lineHeight: 18,
        maxWidth: 280,
        size: 12,
        x: 15,
        y: 15,
        line: 1,
      });

      const img = await painter.getImage();
    },
  },
};
</script>

<style lang="scss">
.page {
  padding-top: 30rpx;
}
.canvas {
  width: 310px;
  height: 550px;
  background: #ff5d5d;
  margin: 0 auto;
}
</style>
